<template>
    <div class="h265webjs-component">
        <!-- 播放器容器 -->
        <div class="player-container">
            <!-- 播放器 -->
            <div :id="playerId" class="glplayer"></div>
            <!-- 控制栏 -->
            <div class="control-bar" v-if="url">
                <!-- 左侧 -->
                <div class="left">
                    <!-- 视频名称 -->
                    <p>{{ name }}</p>
                </div>
                <!-- 右侧 -->
                <div class="right">
                    <!-- 音量图标 -->
                    <i class="icon" :class="[sound ? 'shengyinkai' : 'shengyinguanbi']" @click="setVoice"
                        style="margin-right: 20px; cursor: pointer"></i>
                    <!-- 全屏图标 -->
                    <i class="icon quanping" @click="expandVideo" style="margin-right: 20px; cursor: pointer"></i>
                    <!-- 关闭图标 -->
                    <i class="icon guanbi" @click="closeVideo" style=" cursor: pointer"></i>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, onUnmounted, watch, nextTick } from "vue";
import {
    createPlayerServer,
    executePlayerServer,
    destoryPlayerServer,
} from "./player";
const props = defineProps({
    url: {
        type: String,
        default: "",
    },
    id: {
        type: String,
        default: "",
    },
    name: {
        type: String,
        default: "",
    },
});

// 定义一个ref变量，用于存储播放器ID
const playerId = ref("glplayer");
// 定义一个H265JS_DEFAULT_PLAYER_CONFIG对象，用于存储播放器的默认配置
const H265JS_DEFAULT_PLAYER_CONFIG = {
    // 播放器ID
    player: playerId.value,
    // 播放器宽度
    width: "100%",
    // 播放器高度
    height: "100%",
    // 播放器token
    token: "base64:QXV0aG9yOmNoYW5neWFubG9uZ3xudW1iZXJ3b2xmLEdpdGh1YjpodHRwczovL2dpdGh1Yi5jb20vbnVtYmVyd29sZixFbWFpbDpwb3JzY2hlZ3QyM0Bmb3htYWlsLmNvbSxRUTo1MzEzNjU4NzIsSG9tZVBhZ2U6aHR0cDovL3h2aWRlby52aWRlbyxEaXNjb3JkOm51bWJlcndvbGYjODY5NCx3ZWNoYXI6bnVtYmVyd29sZjExLEJlaWppbmcsV29ya0luOkJhaWR1",
    // 播放器扩展信息
    extInfo: {
        // moov文件开始标志
        moovStartFlag: true,
        // 自动裁剪
        autoCrop: true,
        // 自动播放
        autoPlay: true,
    },
};

// 定义一个ref对象，用于存储视频播放器的引用
const timelineRef = ref(null);
// 定义一个变量，用于存储视频播放器对象
let playerObject: any = null;

// 合并默认配置和传入的配置
const resolveConfig = (conf?: Record<string, any>) =>
    Object.assign(H265JS_DEFAULT_PLAYER_CONFIG, conf);

// 监听url的变化，当url变化时，重新初始化视频
watch(
    () => props.url,
    (newVal) => {
        initVideo();
    },
    { deep: true, immediate: false }
);

// 组件挂载时，初始化视频
onMounted(() => {
    initVideo();
});

// 组件卸载时，销毁视频
onUnmounted(() => {
    destoryPlayer();
});

// 初始化视频
const initVideo = () => {
    // 如果props中有url属性
    if (props.url) {
        // 销毁播放器
        destoryPlayer();
        // 生成播放器id
        playerId.value = "glplayer" + props.id + new Date().getTime();
        // 设置默认播放器配置
        H265JS_DEFAULT_PLAYER_CONFIG.player = playerId.value;
        // 在下一个tick中执行
        nextTick(() => {
            // 创建播放器
            playerObject = createPlayerServer(props.url, resolveConfig());
            // 执行播放器
            executePlayerServer(playerObject, timelineRef.value);
        });
    }
};

// 销毁视频
// 定义一个销毁播放器的函数
const destoryPlayer = () => {
    // 如果播放器对象存在，则调用销毁播放器服务函数
    playerObject && destoryPlayerServer(playerObject);
    // 将播放器对象置为null
    playerObject = null;
};

// 关闭视频
const closeVideo = () => {
    destoryPlayer();
};

// 全屏视频
const expandVideo = () => {
    playerObject.fullScreen();
};

// 控制声音
// 定义一个变量sound，初始值为false
const sound = ref(false);
// 定义一个函数setVoice，用于设置声音
const setVoice = () => {
    // 将sound的值取反
    sound.value = !sound.value;
    // 如果sound的值为true，则设置playerObject的音量为1
    if (sound.value) {
        playerObject.setVoice(1);
    // 否则，设置playerObject的音量为0
    } else {
        playerObject.setVoice(0);
    }
};
</script>

<style lang="less" scoped>
.h265webjs-component {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;

    p {
        margin: 0;
    }

    .player-container {
        width: 100%;
        height: 100%;
        overflow: hidden;
        position: absolute;
        left: 0;
        right: 0;

        .glplayer {
            width: 100%;
            height: 100%;
            overflow: hidden;

            :deep(video) {
                width: 100%;
                height: 100%;
                object-fit: fill;
                overflow: hidden;
            }
        }

        .control-bar {
            position: absolute;
            bottom: 0;
            left: 0;
            z-index: 1;
            width: 100%;
            height: 30px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            background-color: rgba(0, 0, 0, 0.5);
            color: #fff;
            padding: 0 10px;
            box-sizing: border-box;

            .right {
                display: flex;
                align-items: center;

                .icon {
                    display: block;
                    width: 22px;
                    height: 22px;

                    &.shengyinkai {
                        background: url("../../assets/images/shengyinkai.png") no-repeat center;
                        background-size: 100% 100%;
                    }

                    &.shengyinguanbi {
                        background: url("../../assets/images/shengyinguanbi.png") no-repeat center;
                        background-size: 100% 100%;
                    }

                    &.quanping {
                        background: url("../../assets/images/quanping.png") no-repeat center;
                        background-size: 100% 100%;
                    }

                    &.guanbi {
                        background: url("../../assets/images/guanbi.png") no-repeat center;
                        background-size: 100% 100%;
                    }
                }
            }
        }
    }
}
</style>